<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="/static/admin/layui-v2.5.7/css/layui.css" media="all">
    <link rel="stylesheet" type="text/css" href="/static/admin/css/admin.css"/>

</head>
<body>
    <div class="page-content-wrap">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <div class="layui-inline tool-btn">
                    <div class="layui-input-inline">
                        <input type="text" name="xinxi" id="xinxi" required lay-verify="required" placeholder="请输入项目信息" autocomplete="off" class="layui-input">
                    </div>
                    <button class="layui-btn" lay-submit lay-filter="formDemo" id="chaxun" data-type="relod">
                        <i class="layui-icon layui-icon-search"></i> 查询
                    </button>
                    <button class="layui-btn layui-btn-normal"  type="button" ca class="layui-btn" id="tianjia">
                        <i class="layui-icon">&#xe608;</i> 添加
                    </button>
                </div>
            </div>
        </form>
        <div class="layui-form" id="table-list">
            <table id="demo" lay-filter="demo" ></table>
        </div>
    </div>
<script type="text/html" id="barDemo" >
    <button type="button" class="layui-btn layui-btn-xs" lay-event="edit"  id="bianji">
        <i class="layui-icon layui-icon-edit"></i> 编辑
    </button>

    <button type="button" class="layui-btn layui-btn-xs" lay-event="del">
        <i class="layui-icon layui-icon-delete"></i> 删除
    </button>
</script>
<script src="/static/admin/layui-v2.5.7/layui.js"></script>
<script>
    layui.use(['element','jquery','table','form','layer'],function(){
        var table = layui.table;
        var layer=layui.layer;
        var $=layui.jquery;
        table.render({
            elem: '#demo'
            ,height: 312
            ,url: '/admin/project/getProject' //数据接口
            ,toolbar: '#toolbarDemo'
            ,page: true //开启分页
            ,parseData: function(res){ //res 即为原始返回的数据
                return {
                    "code": "0", //解析接口状态
                    "msg": "", //解析提示文本
                    "count": res.data.length, //解析数据长度
                    "data": res.data //解析数据列表
                };
            }
            ,cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                ,{field: 'projectcode', title: '项目编码' ,sort:true}
                ,{field: 'projectname', title: '项目名称'}
                ,{field: 'projectaddress', title: '地址', width:100}
                ,{field: 'propertycompany', title: '物业公司'}
                ,{field: 'area', title: '使用面积(m2)'}
                ,{field: 'enabled', title: '状态',templet: function(d){if(d.enabled == '1'){return '启用'}else{return '停用'}}}
                ,{field: 'note', title: '备注'}
                ,{fixed: 'right',  align:'center', toolbar: '#barDemo'}
            ]]
        });
        //监听行工具事件
        table.on('tool(demo)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    obj.del();
                    layer.close(index);
                    $.ajax({
                        url: "/deleteXiangMu",
                        type: "POST",
                        data:{"xiangmubianma":data.xiangmubianma}
                    })

                });
            }
            else if(obj.event === 'edit'){
                layer.open({
                    type: 2 //Page层类型
                    ,skin: 'layui-layer-molv'
                    ,area: ['780px', '570px']
                    ,title: ['修改员工信息','font-size:18px']
                    ,shadeClose: true
                    ,shade: 0 //遮罩透明度
                    ,maxmin: true //允许全屏最小化
                    ,content:'xiangmubiaodan.html'
                    ,success: function(layero, index) {
                        var body = layer.getChildFrame('body', index);//获取iframe页的DOM
                        var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象
                        body.find('#xiangmubianma').val(data.xiangmubianma);
                        body.find('#xiangmumingcheng').val(data.xiangmumingcheng);
                        //body.find("input[name=xinbie][value=1]").attr("checked", data.xinbie == 1 ? true : false);
                        body.find("#xiangmudizhi").val(data.xiangmudizhi);
                        body.find('#wuyegongsimingcheng').val(data.wuyegongsimingcheng);
                        body.find('#shiyongmianji').val(data.shiyongmianji);
                        body.find('#beizhu').val(data.beizhu);
                        body.find("input[name=qiyongzhuangtai][value=1]").attr("checked",data.qiyongzhuangtai == 1 ? true : false);
                        body.find("input[name=qiyongzhuangtai][value=2]").attr("checked",data.qiyongzhuangtai == 2 ? true : false);
                    },
                });
            }

        });


        $("#chaxun").click(function () {
            var xinxi=$("input[name='xinxi']").val();
            $.ajax({
                url: "/",
                type: "POST",
                data:{
                    "xinxi":xinxi
                },
                dataType: 'json',
            }),
                    table.render({

                        elem: '#demo'
                        ,height: 312
                        ,url: '/queryAllXiangMuByxinxi' //数据接口
                        ,toolbar: '#toolbarDemo'
                        ,page: true //开启分页
                        ,cols: [[ //表头
                            {type: 'checkbox', fixed: 'left'}
                            ,{field: 'xinxi', title: '项目编码' ,sort:true,fixed: true}
                            ,{field: 'xiangmubianma', title: '项目编码'}
                            ,{field: 'xiangmumingcheng', title: '项目名称'}
                            ,{field: 'xiangmudizhi', title: '地址', width:100}
                            ,{field: 'wuyegongsimingcheng', title: '物业公司'}
                            ,{field: 'shiyongmianji', title: '使用面积(m2)'}
                            ,{field: 'qiyongzhuangtai', title: '状态'}
                            ,{field: 'beizhu', title: '备注'}
                            ,{fixed: 'right',  align:'center', toolbar: '#barDemo'}
                        ]]
                    });

            })


        $("#tianjia").click(function () {
        layer.open({
            type: 2 //Page层类型
            ,skin: 'layui-layer-molv'
            ,area: ['780px', '570px']
            ,title: ['修改员工信息','font-size:18px']
            ,shadeClose: true
            ,shade: 0 //遮罩透明度
            ,maxmin: true //允许全屏最小化
            ,content:'xiangmutianjiabiaodan.html'
            ,success: function(layero, index) {
                var body = layer.getChildFrame('body', index);//获取iframe页的DOM
                var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象
                body.find('#xiangmubianma').val(data.xiangmubianma);
                body.find('#xiangmumingcheng').val(data.xiangmumingcheng);
                //body.find("input[name=xinbie][value=1]").attr("checked", data.xinbie == 1 ? true : false);
                body.find("#xiangmudizhi").val(data.xiangmudizhi);
                body.find('#wuyegongsimingcheng').val(data.wuyegongsimingcheng);
                body.find('#shiyongmianji').val(data.shiyongmianji);
                body.find('#beizhu').val(data.beizhu);
                body.find("input[name=qiyongzhuangtai][value=1]").attr("checked",data.qiyongzhuangtai == 1 ? true : false);
                body.find("input[name=qiyongzhuangtai][value=2]").attr("checked",data.qiyongzhuangtai == 2 ? true : false);
            },
        });
        })

        var $ = layui.$, active = {
            reload: function(){
                var demoReload = $('#demoReload');

                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        key: {
                            id: demoReload.val()
                        }
                    }
                }, 'data');
            }
        };

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>
</body>
</html>